<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="reactDom"></div>
    <script type="text/babel">
      //   1.使用表达式 {表达式}
      let text = "你好";
      let num = 9527;

      function fun(obj) {
        return "姓名是" + obj.name + "------年龄是" + obj.age;
      }
      let user = {
        name: "小明",
        age: "18",
      };
      let phone = 3999;
      let arr = [
        <p>新闻列表1</p>,
        <p>新闻列表2</p>,
        <p>新闻列表3</p>,
        <p>新闻列表4</p>,
        <p>新闻列表5</p>,
      ];
      let linkUrl = "http://www.baidu.com";
      let modStyle = { color: "red", backgroundColor: "pink" };
      let myDom = (
        <div>
          <div>{text}</div>
          <div>{num}</div>
          {/*2.计算*/}
          <div>{num + 1}</div>
          {/*3.函数的使用*/}
          <div>{fun(user)}</div>
          {/*三目运算符*/}
          <div>
            当前手机的价格是{phone}-----三目后的价格
            {phone > 4000 ? "超过4000好贵" : "没有超过4000块钱"}
          </div>
          {/*列表的渲染*/}
          <div>{arr}</div>
          {/*属性设置*/}
          <a href={linkUrl}>点我去百度</a>
          {/*样式*/}
          {/*注意在jsx 不能使用class这个属性 因为class是js的关键字*/}
          <div style={modStyle}>修改我的样式</div>
        </div>
      );
      ReactDOM.render(myDom, document.getElementById("reactDom"));
    </script>
  </body>
</html>
